<template>
  <el-dialog @close="cancleEditDict" v-model="dialogVisible" title="修改检测模板-检测项" destroy-on-close center>
    <template #default>
      <el-form :model="dict" label-width="100px" label-position="left">
        <el-form-item label="*检测项">
          <el-input v-model="dict.checkItemType" readonly aria-placeholder="检测项" />
        </el-form-item>

        <el-form-item label="检测项工具">
          <el-input v-model="dict.checkItemTools" aria-placeholder="检测项名称" />
        </el-form-item>
        <el-form-item label="检测要求">
          <el-input type="textarea" v-model="dict.checkRequest" aria-placeholder="检测要求" />
        </el-form-item>
        <el-form-item label="标准值">
          <el-input type="textarea" v-model="dict.checkItemStandard" aria-placeholder="标准值" />
        </el-form-item>
        <el-form-item label="单位">
          <el-select  v-model="dict.checkItemUnit"  >
            <el-option v-for="item in types" :key="item.checkItemUnit" :label="item.checkItemUnit" :value="item.checkItemUnit" />
          </el-select>
        </el-form-item>

        <el-form-item label="误差上限">
          <el-input-number v-model="dict.checkItemErrorUp" :min="0" :max="10" :step="0.1" @change="handleChangeUp" />
        </el-form-item>

        <el-form-item label="误差下限">
          <el-input-number v-model="dict.checkItemErrorDown" :min="-10" :max="0" :step="0.1" @change="handleChangeDown" />
        </el-form-item>


        <el-form-item label="说明图">
          <el-input  v-model="dict.notePicture" placeholder="请输入说明图" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="dict.note" placeholder="请输入内容" />
        </el-form-item>


        <el-form-item label="备注">
          <el-input type="textarea" v-model="dict.note" aria-placeholder="检测项名称" />
        </el-form-item>

      </el-form>
    </template>
    <!-- footer插槽中放两个按钮 -->
    <template #footer>
      <el-row>
        <el-col :span="12">
          <el-button type="primary" @click="editDict">确定</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="cancleEditDict">取消</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { watch } from "vue";
import FlawItemRequest from "@/api/flawItem.js";
export default {
  props: ["visible","checkItemId"],
  emits: ["optionCompleted1"], // 对外暴露一个事件，用来传递添加学生的操作结果
  data() {
    return {
      dict: {},// 绑定要编辑的学生信息
      dialogVisible: false,// 编辑学生窗口的显示与隐藏
      types:{},
    }
  },
  methods: {
    /**
     * 更改handleChangeUp的值
     */
    handleChangeUp(value) {
      this.dict.checkItemErrorUp = value;
    },

    /**
     * 更改handleChangeDown的值
     */
    handleChangeDown(value) {
      this.dict.checkItemErrorDown = value;
    },


    /**
     * 取消添加学生的事件
     */
    cancleEditDict(){
      // 通知父组件  操作完成，让父组件关闭窗体
      this.$emit("optionCompleted1");
    },
    /**
     * 添加学生信息
     */
    editDict(){
      console.log(this.dict)
      FlawItemRequest.updateCheckItemTemplate(this.dict,res=>{
        if (res.code == '200'){
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          // 通知父组件  操作完成，让父组件关闭窗体
          this.$emit("optionCompleted1");
        }else if(res.code == '300'){
          this.$message({
            type: 'warning',
            message: '字典' + (res.msg.indexOf("dictName") > 0 ?"名称":"类型") + "重复"
          });
        }else{
          this.$message({
            type: 'error',
            message: '编辑字典失败!'
          });
        }
      });
    },

    /**
     * 加载学生信息
     */
    loadDict(){
      FlawItemRequest.getById(this.checkItemId,res=>{
        if(res.data != null)
          this.dict = res.data;
          console.log(this.dict)
      });
    },



  }, mounted(props) {
    this.loadDict();
    // this.loadDictAll();
    // 侦听props   一旦发生变化，就会出发下面的函数
    watch(() => this.visible, (newVal, oldVal) => {
      // 将最新的值设置给弹窗的dialogVisible属性
      this.dialogVisible = newVal;
    });

    watch(() => this.checkItemId, (newVal, oldVal) => {
      // 如果dictId 发生变化，重新加载字典信息
      this.loadDict();
    });
  }
}
</script>